import Taro from '@tarojs/taro'
import styles from './index.module.scss'

const CategoryBox = ({ list }) => {
  const handleEnterCategoryPage = (id) => {
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: `/pages/category/index?id=${id}`,
    })
  }
  return (
    <div className={styles.categoryBox}>
      <div className={styles.categoryGroup}>
        {list?.length > 0 &&
          list?.map((item, index) => (
            <div
              key={item.id}
              className={styles.category}
              onClick={() => handleEnterCategoryPage(item.id)}
            >
              <img className={styles.img} src={item.channelLogo} alt='' />
              <div className={styles.categoryName}>
                {item.channelName.slice(0, 4)}
              </div>
            </div>
          ))}
      </div>
    </div>
  )
}

export default CategoryBox
